<html>
	<head>
	<link rel="stylesheet" href="css/animation.css" type="text/css"/>
	<link rel="stylesheet" href="css/general.css" type="text/css"/>
	<SCRIPT src='js/dropzone.js'></SCRIPT>
	<SCRIPT src='js/jquery.js'></SCRIPT>
	<style type="text/css">
		.dropzone {
		border: 1px solid rgba(0,0,0,0.03);
		min-height: 140px;
		width: 120px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		background: rgba(0,0,0,0.03);
		padding: 23px;
		}
		.dropzone .dz-preview, .dropzone-previews .dz-preview {
			background: rgba(255,255,255,0.8);
			position: relative;
			display: inline-block;
			margin: 0px;
			vertical-align: top;
			border: 1px solid #acacac;
			padding: 6px 6px 6px 6px;
		}
	</style>
	</head>
	
	<body>
		<form id="dropzone" action="./upload.php" class="dropzone">
			<div class="dz-default dz-message"></div>
		</form>
	</body>
	
	<script type="javascript">
	$(".dropz").dropzone({
		  url: "/upload.php",
		  maxFiles: 10,
		  maxFilesize: 2,
		  acceptedFiles: ".jpg,.jpeg,.png,.gif",
		  init: function() {
			this.on("sending", function(){
			  //每个上传之前执行
			});
			this.on("complete", function() {
			  //每个上传结束后执行
			});
			this.on("success", function(file,data) {
				 setTimeout(function(){
					$('.dz-default').html();
				},3000)
			});
		  }
	});
	Dropzone.options.myDrop = {
		init: function(){
			this.on("complete", function() {
				if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
				// File finished uploading, and there aren't any left in the queue.
				}
			});
		}
	};
	
	</script>
</html>